iT邦幫忙

grid layout相關文章
共有 17 則文章
鐵人賽 自我挑戰組 DAY 7
大二萌新的學習紀錄 系列 第 7

技術 Day 7 : HTML - 上下左右!如何用Flex的屬性去控制grid?

這篇想和大家聊聊,如何用Flex的相關屬性控制CSS grid的排列位置和Flex能用的屬性大致上一樣,但多了justify-self和justify-cont...

鐵人賽 自我挑戰組 DAY 6
大二萌新的學習紀錄 系列 第 6

技術 Day 6 : HTML - 網頁排版超強神器part_2,CSS grid到底是什麼?

上篇介紹了CSS Flex,這篇想來聊聊CSS grid到底是什麼東西 這裡想先給大家一個觀念:Flex和grid它們並不是死對頭,它們是「好戰友」它們的出現是...

鐵人賽 Modern Web DAY 5

技術 DAY5 速談flex gride布局、定位、響應式

為了加快進度,我要快速帶過flex、gride布局、定位和響應式,幫你繫個安全戴,要飆車囉~~ flex : 學習方法→邊玩蛙蛙回家,邊看連結2的說明 遊...

鐵人賽 Modern Web DAY 29
我說那個手機版 系列 第 29

技術 [Day 29] 還在吵架的 subgrid

Grid 與 subgrid subgrid 是一種很奇妙的跨維度設定,在 w3c 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。 遵從父層格線系統,...

鐵人賽 Modern Web DAY 27
我說那個手機版 系列 第 27

技術 [Day 27] 所以說那個手機版

Grid 還是 Flex 我們回歸到行動裝置本身,究竟我們在前端設計的時候,要採用 Grid 還是 Flex 來製作所謂的手機版? 我認真說,如果你是 AWD...

鐵人賽 Modern Web DAY 26
我說那個手機版 系列 第 26

技術 [Day 26] RWD 的難題 Part 3

從手機版到桌機版 講完一些基礎的 Media Query 之後,我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況,在那個 .sidebar 屬於...

鐵人賽 Modern Web DAY 24
前端常見問題攻略 系列 第 24

技術 怎樣也不會失手的 Bootstrap 格線運用技巧

Bootstrap 令人稱羨的其中之一就是它的格線系統,不僅易用且符合網頁視覺設計概念。雖說如此,在官網文件 落落長的文件還是令許多開發者不知如何快速上手,本篇...

鐵人賽 Modern Web DAY 23
我說那個手機版 系列 第 23

技術 [Day 23] 實際操作 Part 5

從手機版開始 昨天提到了百分比需要留意的地方,那麼,如果我們依舊使用 ch 為單位的時候,是否需要留意這些尺寸斷點的問題? 要。 所以,我們該怎麼計算這種狀...

鐵人賽 Modern Web DAY 22
我說那個手機版 系列 第 22

技術 [Day 22] 實際操作 Part 4

從手機版開始 還記得昨天的狀況嗎?那個 33% 為何會發生這樣的事情?這件事情在小尺寸基本上一定會發生,就端看你剩下的 1% 是不是跟 grid-gap 的寬度...

鐵人賽 Modern Web DAY 21
我說那個手機版 系列 第 21

技術 [Day 21] 實際操作 Part 3

從手機版開始 好的,今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器,所以這邊我們會準備一些內容,大...

鐵人賽 Modern Web DAY 19
我說那個手機版 系列 第 19

技術 [Day 19] 實際操作 Part 1

從手機版開始 我們今天來講一個比較古老的排版方式,除了天地之間講幹話之外,中間通常還會有一個靠北邊,或是靠南邊的側邊欄。所以我們可以快速的把框架先拉出來。 我...

鐵人賽 Modern Web DAY 16
我說那個手機版 系列 第 16

技術 [Day 16] 這不是 Media Query

Media Query 這件事情應該是講到爛掉了,我們稍微複習一下就好, @media (min-width: 32rem) {} 收工(欸)! 爾或者是...

鐵人賽 Modern Web DAY 15
我說那個手機版 系列 第 15

技術 [Day 15] Grid 格線系統 Part 5

關於自動這件事 我們昨天有提到 dense 這件事情,我們今天繼續腦補一下這個東西該怎麼把玩。首先,先以一個簡單的例子來開場,這是沒有使用 dense 的設定所...

鐵人賽 Modern Web DAY 14
我說那個手機版 系列 第 14

技術 [Day 14] Grid 格線系統 Part 4

對齊與補白 基本上在格線系統當中,對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了(欸不是)。對齊系列基本上可用的有, 屬...

鐵人賽 Modern Web DAY 13
我說那個手機版 系列 第 13

技術 [Day 13] Grid 格線系統 Part 3

間隔、間隔、間隔 先不囉唆,上圖。 中間看起來比較密集的部分,就是所謂的 間隔,在樣式表當中就是這樣設定, .grid { display: grid...

鐵人賽 Modern Web DAY 11
我說那個手機版 系列 第 11

技術 [Day 11] Grid 格線系統 Part 1

概述 我們再重新複習一下, Grid for layout, Flex for component. 格線系統的發展從 2011 年開始,一直到 2016...